<template>
  <div class="table">
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Age</th>
          <th>Gender</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(user,index) in users" :key="user.id">
          <td>{{ index+1 }}</td>
          <td>{{ user.name }}</td>
          <td>{{ user.age }}</td>
          <td>{{ user.gender?'男':'女' }}</td>
          <td>
            <slot :row="user" msg="默认消息"></slot>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  props: {
    users:Array
   }
}
</script>

<style scoped>
/* 简易风格表格样式 */
 .table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #ccc;
  }
 .table th,td{
  text-align: center;
  border: 1px solid #ccc;
  
}
</style>